/**
 * Event 事件
 * ----------------
 */

import React, { Component } from 'react'

export default class Event extends Component {
  constructor(props) {
    super(props)
    this.state = {
      text: '<默认文本>'
    }
    this.firstEvent = this.firstEvent.bind(this)
  }

  firstEvent() {
    console.log('event 第1种写法 --- text='+this.state.text);
    this.setState({
      text: '事件 1'
    })
  }

  secondEvent() {
    console.log('event 第2种写法 --- text='+this.state.text);
    this.setState({
      text: '事件 2'
    })
  }

  thirdEvent=()=> {
    console.log('event 第3种写法 --- text='+this.state.text);
    this.setState({
      text: '事件 3'
    })
  }

  fourthEvent=()=> {
    console.log('event 第4种写法 --- 上此结果 text='+this.state.text);
    this.setState({
      text: '事件 4'
    })
  }

  render() {
    let btnStyle = {marginTop: 10, marginLeft: 10}
    return(
      <div>
        {'Event 事件的4中写法 => text='+this.state.text}
        <br />
        <button style={btnStyle} onClick={this.firstEvent}>第1种event事件写法</button>
        <br />
        <button style={btnStyle} onClick={this.secondEvent.bind(this)}>第2种event事件写法</button>
        <br />
        <button style={btnStyle} onClick={this.thirdEvent}>第3种event事件写法</button>
        <br />
        <button style={btnStyle} onClick={()=>this.fourthEvent()}>第4种event事件写法</button>
      </div>
    )
  }
}